<template>
	<view class="conter">
		<header-box :title="title"></header-box>

		<view class="conter-text">
			<view class="bgc">
				<view url="/#" class="text-heig">
					<!--  @click="showNum1 = true" -->
					<text>类型</text>
					<view class="" style=" font-size: 24rpx;">
						{{classInit}}
						<!-- <u-icon name="arrow-right" color="#999999" size="28"></u-icon> -->
					</view>
				</view>
				<!-- <view class="text-heig" v-if="textType == 2 " @tap="show = true">
					<text>日期</text>
					<view class="" style=" font-size: 24rpx;">
						{{dataTime}}
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</view> -->
				<view class="" v-if="textType == 2 ">
					<view @tap="gohome('/pages/putStock/danweiList?addId=' + 11)" class="text-heig">

						<text>供应商</text>
						<view class="" style=" font-size: 24rpx;">
							{{nitName}}
							<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
						</view>
					</view>
					<view @tap="gohome('/pages/shopping/stock')" class="text-heig">
						<text>仓库</text>
						<view class="" style=" font-size: 24rpx;">
							{{stockName}}
							<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
						</view>
					</view>
				</view>


				<view class="text-heig" @tap="showNum = true">
					<text>备注</text>
					<text style="color: #999999; font-size: 30rpx;">{{memo ? memo : '请输入备注'}}</text>
				</view>
			</view>


			<view class="box-top flex-around">
				<view v-if="navigatorProp == '2'" @tap="gohome('/pages/putStock/goodsList')"
					class="wh30% h60 text-center r30" style="background-color: #ffffff;
					line-height: 60rpx;">
					选择入库商品
				</view>
				<!-- -->
				<view v-if="navigatorProp == '4'" @tap="gohome('/pages/removeStock/tabList')"
					class="wh30% h60 text-center r30" style="background-color: #ffffff;
					line-height: 60rpx;">

					选择入库单
				</view>
			</view>


			<!-- godList -->
			<view class="bgc" style="margin-top: 30rpx;" v-if=" navigatorProp == 4">
				<view v-if="showBtn == 1" class="boc-bott" v-for="(item, index) in listFrom" :key="index"
					@tap="removeFrom(item.id)">
					<block v-for="(item1, id) in item.goods" :key="id">
						<view class="lin-heig flex-box">
							<view class="flex-center">
								<view class="" style="width: 90rpx; height: 90rpx;">
									<image :src="img + item1.image" mode=""></image>
								</view>
								<view class="" style="font-size: 28rpx;color: #000000;
									font-weight: 700;margin-left: 31rpx;line-height:50rpx;">
									{{item1.name}}
									<view class="" style="font-size: 24rpx; font-weight: 300;">
										数量: {{item1.num}} {{item1.unit}}
									</view>
								</view>
							</view>
							<view class="">
								<view class="">
									{{item.company}}
								</view>
							</view>
						</view>
					</block>
				</view>



			</view>
			<!-- listFrom -->
			<view class="bgc" style="margin-top: 30rpx;" v-if=" navigatorProp == 2">
				<view class="boc-bott">
					<view v-if="showBtn == 1" class="lin-heig flex-box" v-for="(item, index) in godList" :key="index"
						@tap="removeShopping(item.id)">
						<view class="flex-center">
							<view class="" style="width: 90rpx; height: 90rpx;">
								<image :src="img + item.image" mode=""></image>
							</view>
							<view class=""
								style="font-size: 28rpx;color: #000000;font-weight: 700;margin-left: 31rpx;line-height:50rpx;">
								{{item.name}}
								<view class="" style="font-size: 24rpx; font-weight: 300;">
									数量: {{item.num}} {{item.unit}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view v-if="showBtn == 1" class="add bg-gradual-green" @tap="addGoods"> 确定 </view>
		<view v-if="showBtn == 2" class="add bg-gradual-green" style="color: #000000;"> 已提交 </view>
		<!-- <u-button 
			class="add"
			@click="addGoods"
			throttle-time="2000"
			:hair-line="false"
			>
			确定
		</u-button> -->
		<!-- hover-class="add" -->








		<!-- 数量 -->
		<u-popup v-model="showNum" mode="center" width="500rpx" height="280rpx" border-radius="14">
			<view class=""
				style="width: 100%; height: 100rpx; line-height: 100rpx;text-align: center; font-size: 30rpx;">
				备注
			</view>
			<view class="" style="padding: 0 40rpx; height: 60rpx; line-height: 60rpx;">
				<input type="text" v-model="memo" style="text-align: center;background-color: #F0F0F0; height: 100%;"
					placeholder="请输入内容" placeholder-style="text-align:center;" />
			</view>
			<view class="box-btn">
				<view class="back" style="background-color: #CCCCCC; color: #FFFFFF;" @click="showNum = false">
					取消
				</view>
				<view class="back bg-gradual-green" @click="showNum = false">
					确定
				</view>
			</view>
		</u-popup>


		<u-popup v-model="showNum2" mode="center" width="500rpx" height="200rpx" border-radius="14">
			<view class=""
				style="width: 100%; height: 100rpx; line-height: 100rpx;text-align: center; font-size: 30rpx;">
				移除
			</view>
			<view class="box-btn">
				<view class="back" style="background-color: #CCCCCC; color: #FFFFFF;" @click="showNum2 = false">
					取消
				</view>
				<view class="back bg-gradual-green" @click="addRemove">
					确定
				</view>
			</view>
		</u-popup>

		<!-- 借出类型 -->
		<u-popup v-model="showNum1" mode="center" width="500rpx" height="280rpx" border-radius="14">
			<view class=""
				style="width: 100%; height: 100rpx; line-height: 100rpx;text-align: center; font-size: 30rpx;">
				选择类型
			</view>
			<view class="box-radio">
				<!-- 入库类型 -->
				<u-radio-group v-if="stock == 1" v-model="value" @change="radioGroupChange">
					<u-radio v-for="(item, index) in list" :key="index" :name="index" :disabled="item.disabled">
						{{item.elest}}
					</u-radio>
				</u-radio-group>
			</view>
			<view class="box-btn">
				<view class="back" style="background-color: #CCCCCC; color: #FFFFFF;" @click="showNum1 = false">
					取消
				</view>
				<view class="back bg-gradual-green" @click="typeText">
					确定
				</view>
			</view>
		</u-popup>

		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>

		<!-- 日历弹层 -->
		<u-picker mode="time" v-model="show" :params="params" @confirm="confirm"></u-picker>

	</view>
</template>

<script>
	import headerBox from '../../components/header/header.vue'
	// import yy-loading from '../../components/yy-loading/yy-loading.vue'
	export default {
		components: {
			headerBox
		},
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false,
					timestamp: true,
				},
				action: this.$IMG_URL,
				title: '添加入库单',
				showNum: false,
				showNum1: false,
				showNum2: false,
				show: false,
				mode: 'date',
				showBtn: 1,
				disabledBtn: false,
				list: [{
						name: '2',
						disabled: false,
						elest: '购入',
					},
					{
						name: '1',
						disabled: false,
						elest: '归还',
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '',
				stock: '1',
				listFrom: [],
				loadingShow: true,
				searchVal: '',
				nitName: '',
				monad: '单位',
				stockName: '',
				typeName: '',
				classInit: '购入',
				init: '',
				stockId: '',
				pathImage: '',
				turnover_id: 2, // 入库类型ID
				textInput: '', // 输入的备注
				page: 1,
				rows: 10,
				memo: '',
				// dataTime: '请选择时间',
				godList: [],
				danweiID: '',
				stockId: '',
				navigatorProp: 2,
				textType: 2,
				shoppingId: '',
				img: this.$images,
			}
		},
		onLoad(e) {
			this.stock = e.item
			this.nitName = e.name
			this.stockSelect(this.stock)
			console.log(this.img)
			console.log('e==>', e);
		},
		onShow() {
			this.nitName = this.searchVal.supplier_name
			// this.navigatorProp = uni.getStorageSync('navigatorProp')

			console.log('e==>', this.searchVal);
			if (uni.getStorageSync('list')) {
				this.listFrom = uni.getStorageSync('list')
			}

			if (uni.getStorageSync('goodsList')) {
				var arryList = []
				this.godList = []
				arryList = uni.getStorageSync('goodsList')



				var temp = {};
				for (var i in arryList) {
					var key = arryList[i].goods_id;
					if (temp[key]) {
						temp[key].goods_id = temp[key].goods_id;
						temp[key].num = Number(temp[key].num) + Number(arryList[i].num)
					} else {
						temp[key] = {};

						temp[key].goods_id = arryList[i].goods_id;
						temp[key].num = arryList[i].num;
					}
					temp[key].name = arryList[i].name;
					temp[key].unit = arryList[i].unit;
					temp[key].image = arryList[i].image;
				}
				console.log(temp);
				for (var k in temp) {
					this.godList.push(temp[k])
				}
				console.log(this.godList);
			}
		},
		onHide() {

		},
		methods: {
			gohome(url) {
				console.log(url)
				uni.navigateTo({
					url,
				})
			},

			// 确定移除对应的用户
			addRemove() {

				if (this.listFrom.length == 0) {
					this.godList.forEach((item, index, j) => {
						if (item.id == this.shoppingId) {
							this.godList.splice(index, 1)
						}
					})
					this.showNum2 = false
				} else {
					this.listFrom.forEach((item, index, j) => {
						if (item.id == this.shoppingId) {
							this.listFrom.splice(index, 1)
						}
					})
					this.showNum2 = false
				}


			},


			removeShopping(id) {
				this.showNum2 = true
				this.shoppingId = id
			},

			removeFrom(id) {
				this.showNum2 = true
				this.shoppingId = id
			},

			// 确定入库商品
			async addGoods() {
				var that = this
				this.showBtn = 2
				that.$refs.loading.open()
				// 确定入库
				this.godList.forEach((item, index, j) => {
					delete item.name
					delete item.image
					delete item.unit
				})

				if (this.danweiID == '' || this.stockId == '') return this.$tools.msg('入库内容不能为空!') 
				const res = await this.$u.post("api/Invoic/buy_order_add", {
					store_id: this.stockId,
					// time: this.dataTime,
					// turnover_id: this.turnover_id,
					supplier_id: this.danweiID, // 供应商id
					goods: JSON.stringify(this.godList),
					remark: this.memo, // 
				});

				this.$refs.loading.close()
				if (res.code != 1) {
					this.showBtn = 1
					this.$tools.msg(res.msg)
				}
				if (res.code == 1) {

					this.$tools.msg(res.msg)


					setTimeout(function() {
						uni.navigateBack({
							delta: 2
						})
					}, 1500)
				}
			},


			// 上传图片
			uploadImage(e) {
				this.pathImage += e.data + ','
				console.log('上传图片,', this.pathImage)
			},


			stockSelect() {
				if (this.stock == '1') {
					this.title = '添加入库单'
				}
				if (this.stock == '2') {
					this.title = '添加出库单'
				}
			},

			change(e) {
				console.log(e);
			},

			confirm(e) {
				this.dataTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
			},

			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
				var text = ''
				if (e == 0) {
					text = '购入' // 2
				}

				if (e == 1) {
					text = '归还' // 1
				}

				if (e == 1) {
					this.navigatorProp = '4'
					uni.setStorageSync('navigatorProp', 4)
					this.classInit = text

					this.dataTime = '请选择' + text + '时间'
					this.turnover_id = 1 // 归还
					this.textType = 1 // 直接选时间和备注 归还
				} else {
					this.navigatorProp = '2'
					uni.setStorageSync('navigatorProp', 2)
					this.textType = 2
					this.classInit = text
					this.turnover_id = 2
					this.dataTime = '请选择' + text + '时间'
				}
				// this.turnover_id = e.name
				this.showNum1 = false
			},

		}
	}
</script>

<style lang="scss" scoped>
	.conter {
		width: 100%;
		height: 100vh;
		margin-bottom: 200rpx;
		position: relative;
		margin-bottom: 240rpx;
		background-color: #EEEEEE;

	}

	image {
		width: 100%;
		height: 100%;
	}

	.conter-text {
		padding: 30rpx;

		.bgc {
			width: 100%;
			// height: 200rpx;
			padding: 0 30rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;

			.text-heig {
				height: 108rpx;
				line-height: 108rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #F0F0F0;
			}


			.left-box {
				height: 310rpx;
				padding-top: 30rpx;

				/deep/.u-list-item.data-v-3d60ab68 {
					margin: 0 !important;
				}
			}


			.shop-heig {
				height: 144rpx;
				padding-top: 40rpx;

				view {
					margin-top: 24rpx;
					border-bottom: 1rpx solid #F0F0F0;
				}
			}
		}

		.box-top {
			text-align: center;
			color: #333333;
			margin-top: 30rpx;

			navigator {
				width: 40%;
				height: 70rpx;
				line-height: 70rpx;
				background-color: #EEEEEE;
				border-radius: 35rpx;
				text-align: center;
			}
		}
	}

	.add {
		padding: 0 30upx;
		// background-image: linear-gradient(45deg, #6067E3, #9195FB);
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		width: 80%;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		transform: translateX(-50%);
		text-align: center;
		color: #FFFFFF;
		font-size: 32rpx;
	}

	/deep/ .u-btn--default.data-v-c37a3af0 {
		color: #FFFFFF;
		border-color: #6067E3;
		border-radius: 0;
		border: 0rpx solid #6067E3 !important;
		background-image: linear-gradient(45deg, #6067E3, #9195FB);
	}


	.box-btn {
		height: 100rpx;
		width: 90%;
		margin: 30rpx auto 30rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: space-around;

		.back {
			width: 40%;
			height: 60rpx;
			border-radius: 30rpx;
			line-height: 60rpx;
			text-align: center;
		}

		view:last-child {
			border-right: 0;
		}
	}


	.box-radio {
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: space-around;
	}

	.boc-bott {
		border-bottom: 1rpx solid #F0F0F0;

		.lin-heig {
			height: 160rpx;
			border-radius: 10rpx;
			margin-bottom: 10rpx;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #EEEEEE;
		}
	}

	.boc-bott:last-child {
		border-bottom: 0;
	}
</style>
